<div
    bsModal
    #createOrEditModal="bs-modal"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-labelledby="createOrEditModal"
    aria-hidden="true"
    [config]="{ backdrop: 'static', keyboard: !saving }"
>
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form
                *ngIf="active"
                #editForm="ngForm"
                novalidate
                (ngSubmit)="save()"
            >
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span *ngIf="deviceEdit.id"
                            >编辑设备: {{ deviceEdit.deviceName }}</span
                        >
                        <span *ngIf="!deviceEdit.id">新增设备</span>
                    </h4>
                    <button
                        type="button"
                        class="close"
                        (click)="close()"
                        [attr.aria-label]="l('Close')"
                        [disabled]="saving"
                    >
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="guradName">设备名称</label>
                            <input
                                type="text"
                                name="deviceName"
                                class="form-control"
                                [(ngModel)]="deviceEdit.deviceName"
                            />
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="guardNo">设备编号</label>
                            <input
                                type="text"
                                name="camId"
                                class="form-control"
                                [(ngModel)]="deviceEdit.camId"
                            />
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="guardNo">设备IP</label>
                            <input
                                type="text"
                                name="ipaddr"
                                class="form-control"
                                [(ngModel)]="deviceEdit.ipaddr"
                            />
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="guardNo">设备方向</label>                            
                            <div class="form-control">                               
                                <label *ngFor="let side of deviceSides; let key = index;">
                                    <input type="radio" name="deviceSide" [(ngModel)]="deviceEdit.deviceSide" [value]="side.key" *ngIf="key==0"  />
                                    <input type="radio" name="deviceSide" [(ngModel)]="deviceEdit.deviceSide" [value]="side.key" *ngIf="key!=0" style="margin-left:20px;"  />
                                    {{side.value}}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button
                        [disabled]="saving"
                        type="button"
                        class="btn btn-default"
                        (click)="close()"
                    >
                        取消
                    </button>
                    <button
                        type="submit"
                        class="btn btn-primary"
                        [disabled]="!editForm.form.valid"
                        [buttonBusy]="saving"
                        [busyText]="l('SavingWithThreeDot')"
                    >
                        <i class="fa fa-save"></i>
                        <span>保存</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
